<!DOCTYPE html>
<html lang="zh-cn" class="act">
<head>
<title>智慧幼儿园-中上</title>
<meta charset=utf-8>
<meta name="keywords" content="智慧幼儿园">
<meta name="description" content="智慧幼儿园">
<meta name="author" content="本站由杭州翰臣科技有限公司进行全程策划/页面设计/程序开发完成.24小时技术支持——翰臣科技：http://www.68team.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="css/mulu15.css">
</head>
<body ontouchstart>

	<!-- 最外侧框架 -->
	<div class="iall">
		<!-- 背景图 定义页面宽高 -->
		<img src="images/in_1.jpg" alt="智慧幼儿园">


		<!-- 目录版块 -->
		<div class="mulu dwcj">
			<img src="images/mulu/mulu_1.jpg" alt="智慧幼儿园">
			<img src="images/mulu/mu_1bg.png" class="c" alt="智慧幼儿园">
			
			<!-- 鸟 -->
			<ul class="niao">
				<li class="li1"> 
					<img src="images/mulu/niao_1_1.png" alt="智慧幼儿园">
				</li>
				<li class="li2"> 
					<img src="images/mulu/niao_2_1.png" alt="智慧幼儿园">
				</li>
			</ul>
			<!-- 目录背景 -->
			<div class="imgbg c">
				<img src="images/mulu/bg_1_4.png" alt="智慧幼儿园">
			</div>

			<!-- 目录文字 -->
			<ul class="wenzi">
				<li class="li1" data-bt="images/mulu/bt_15_01.png">
					<img src="images/mulu/mu_15_1.png" alt="智慧幼儿园">
				</li>
				<li class="li2" data-bt="images/mulu/bt_15_02.png">
					<img src="images/mulu/mu_15_2.png" alt="智慧幼儿园">
				</li>
				<li class="li3" data-bt="">
					<img src="images/mulu/mu_15_3.png" alt="智慧幼儿园">
				</li>
				<li class="li4" data-bt="images/mulu/bt_15_03.png">
					<img src="images/mulu/mu_15_4.png" alt="智慧幼儿园">
				</li>
				<li class="li5" data-bt="">
					<img src="images/mulu/mu_15_5.png" alt="智慧幼儿园">
				</li>
			</ul>

			<!-- 标题 -->

			<div class="biaoti">
				<img src="images/mulu/bt_15.png" alt="智慧幼儿园">
			</div>

			<!-- 返回 -->
			<div class="fh unfh" id="ace">
				<div class="anniu ">
					<img  src="images/zhuti/mp3bg.png" alt="智慧幼儿园">
					<img  src="images/zhuti/fh.png" class="th" alt="智慧幼儿园">
				</div>
			</div>




		</div>



		<!-- 目录详情版块 -->
		<div class="muxq dwcj">
			<img src="images/muluxq/mulu_1.jpg" alt="智慧幼儿园">
			
			<div class="muxqbox">
				<img src="images/muluxq/mulu_2.jpg" alt="智慧幼儿园">
				<!-- 标题文字 -->
				<img src="" class="biaotiwenzi" alt="智慧幼儿园">
				<dl class="muxqdl">
					<dd class="dd2">
						<img src="images/muluxq/mulu_15_1.jpg" alt="智慧幼儿园">

						<!-- 弹窗轮播 -->
						<ul class="lb_tanchuang">
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</dd>
					<dd class="dd3">
						<video src="video/muxq/wlcc/1.mp4" controls></video>
					</dd>
					<dd class="dd4">
						<img src="images/muluxq/mulu_15_3.jpg" alt="智慧幼儿园">
						<div class="mp3" data-mp3="audio/muxq/wlcc/1.mp3">
							<div class="img">
								<img src="images/zhuti/bgm2.png" alt="智慧幼儿园">
								<img src="images/zhuti/bgm1.png" alt="智慧幼儿园">
							</div>
							<audio src="audio/muxq/wlcc/1.mp3"></audio>
						</div>
					</dd>
					<dd class="dd1">
						<div class="swiper-container swiper1 stop-swiping " >
							<div class="swiper-wrapper">
								<div class="swiper-slide" data-bt="images/mulu/bt_15_03.png">
									<div class="sbox">
										<img src="images/muluxq/mulu_15_4.jpg" alt="智慧幼儿园">
										<ul class="ul1 alltime">
											<li class="li1">
												<img src="images/muluxq/wenhao4.png" alt="智慧幼儿园">
												<img src="images/muluxq/mu_15_1.png" alt="智慧幼儿园">
											</li>
										</ul>
									</div>
								</div>
								<div class="swiper-slide" data-bt="images/mulu/bt_15_04.png">
									<div class="sbox">
										<img src="images/muluxq/mulu_15_5.jpg" alt="智慧幼儿园">
										<ul class="ul1 alltime">
											<li class="li2">
												<img src="images/muluxq/wenhao2.png" alt="智慧幼儿园">
												<img src="images/muluxq/mu_15_2.png" alt="智慧幼儿园">
											</li>
											<li class="li3">
												<img src="images/muluxq/wenhao2.png" alt="智慧幼儿园">
												<img src="images/muluxq/mu_15_3.png" alt="智慧幼儿园">
											</li>
										</ul>
									</div>
								</div>
								<div class="swiper-slide" data-bt="images/mulu/bt_15_05.png">
									<div class="sbox">
										<img src="images/muluxq/mulu_15_6.jpg" alt="智慧幼儿园">
									</div>
								</div>
						
							
							</div>
							
						</div>
						<ul class="shipin">
							<li class="li1 prev1" >
								<img src="images/muluxq/in_2.png" alt="智慧幼儿园">
								<img src="images/muluxq/in_2_5.png" alt="智慧幼儿园">
							</li>
							<li class="li1 next1"  >
								<img src="images/muluxq/in_2.png" alt="智慧幼儿园">
								<img src="images/muluxq/in_2_6.png" alt="智慧幼儿园">
							</li>
						</ul>
					</dd>
					<dd class="dd4">
						<img src="images/muluxq/mulu_15_7.jpg" alt="智慧幼儿园">
						<div class="mp3" data-mp3="audio/muxq/wlcc/1.mp3">
							<div class="img">
								<img src="images/zhuti/bgm2.png" alt="智慧幼儿园">
								<img src="images/zhuti/bgm1.png" alt="智慧幼儿园">
							</div>
							<audio src="audio/muxq/wlcc/1.mp3"></audio>
						</div>
					</dd>
					
				</dl>


				<!-- 弹窗轮播 -->
				<div class="tanhcuang_lb">
					<div class="swiper-container swiper_tclb stop-swiping " >
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_15_8.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_15_9.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_15_10.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_15_11.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_15_12.jpg" alt="智慧幼儿园">
								</div>
							</div>
							
						</div>
						
					</div>
					<ul class="lbbtn alltime">
						<li class="li1 prev_lb" >
							<img src="images/muluxq/lbbtn.png" alt="智慧幼儿园">
						</li>
						<li class="li1 next_lb"  >
							<img src="images/muluxq/lbbtn.png" alt="智慧幼儿园">
						</li>
					</ul>

					<div class="out alltime">
						<img src="images/muluxq/out.png" alt="智慧幼儿园">
					</div>
				</div>
			</div>	
			

			<!-- 返回 -->
			<div class="fh xqfh">
				<div class="anniu ">
					<img  src="images/zhuti/mp3bg.png" alt="智慧幼儿园">
					<img  src="images/zhuti/fh.png" class="th" alt="智慧幼儿园">
				</div>
			</div>
		</div>














	</div>




	<script type='text/javascript' src='js/jquery-3.5.1.min.js'></script>
	<script type='text/javascript' src='js/swiper.min.js'></script>

	<script type="text/javascript">


		$(function(){
			// 鸟图片替换
			function yazi1() {
				var fish = 1
				var fishTotal = 2

				setInterval(function() {
					fish++
					if (fish > fishTotal) fish = 1
					$('.mulu .niao .li1 img').attr('src', 'images/mulu/niao_1_' + fish + '.png');
					
				}, 200)
				setInterval(function() {
					fish++
					if (fish > fishTotal) fish = 1
					$('.mulu .niao .li2 img').attr('src', 'images/mulu/niao_2_' + fish + '.png');
					
				}, 300)
			}
			yazi1();



			// 目录关闭父页面iframe 弹窗
			var ace = document.getElementById('ace');
			ace.addEventListener('click',function(){
				var fun="click";
				window.parent.postMessage(fun,'*');
			})


			var swiper1;
			swiper1 = new Swiper('.swiper1', {
				speed:1000,
				centeredSlides : true,
				slidesPerView: 1,
				paginationClickable: true,
				spaceBetween: 0,
				autoplayDisableOnInteraction : false,
				noSwiping : true,
				noSwipingClass : 'stop-swiping',
				prevButton:'.prev1',
				nextButton:'.next1',
				
			});
			
			// 点击显示详情
			$('.mulu .wenzi li').on('click',function(){
				var idx=$(this).index();
				$('.iall .muxq ').show();
				$('.muxq .muxqdl dd').eq(idx).show().siblings().hide();
				// 框架标题文字
				var biaotiwenzi=$(this).attr('data-bt');
				if(biaotiwenzi!=''){
					$('.muxq .biaotiwenzi').show().attr({'src':biaotiwenzi});
				}else{
					$('.muxq .biaotiwenzi').hide();
				}
				// 显示对应版块
				
				if(idx==1){
					$(' .muxq .muxqdl .dd3 video').attr({src:"video/muxq/wlcc/1.mp4"}).trigger('play');
				}
				if(idx==3){
					swiper1.destroy(true,true);
					swiper1 = new Swiper('.swiper1', {
						speed:1000,
						centeredSlides : true,
						slidesPerView: 1,
						paginationClickable: true,
						spaceBetween: 0,
						autoplayDisableOnInteraction : false,
						noSwiping : true,
						noSwipingClass : 'stop-swiping',
						prevButton:'.prev1',
						nextButton:'.next1',
						onTransitionStart: function(swiper1){
							var biaotiwenzi=$('.swiper1 .swiper-slide-active').attr('data-bt');
							if(biaotiwenzi!=''){
								$('.muxq .biaotiwenzi').show().attr({'src':biaotiwenzi});
							}else{
								$('.muxq .biaotiwenzi').hide();
							}
						}
						
					});
				}
			})



			// mp3播放
			$('.muxq .muxqdl  .mp3').on('click',function(){
				var _this=$(this);
				var mp3=$(this).attr('data-mp3');
				_this.stop(true,false).toggleClass('act');
				if(_this.hasClass('act')){
					_this.find('audio').attr({src:mp3}).trigger('play');
				}else{
					_this.find('audio').trigger('pause');
				}
			})


			// 弹窗轮播

			var swiper_tclb;
			swiper_tclb = new Swiper('.swiper_tclb', {
				speed:1000,
				centeredSlides : true,
				slidesPerView: 1,
				paginationClickable: true,
				spaceBetween: 0,
				autoplayDisableOnInteraction : false,
				noSwiping : true,
				noSwipingClass : 'stop-swiping',
				prevButton:'.prev_lb',
				nextButton:'.next_lb',
				
			});

			$('.muxq .lb_tanchuang li').on('click',function(){

				$('.muxq .tanhcuang_lb').show();
				var idx=$(this).index();
				swiper_tclb.destroy(true,true);
				swiper_tclb = new Swiper('.swiper_tclb', {
					speed:1000,
					centeredSlides : true,
					slidesPerView: 1,
					paginationClickable: true,
					spaceBetween: 0,
					autoplayDisableOnInteraction : false,
					noSwiping : true,
					noSwipingClass : 'stop-swiping',
					prevButton:'.prev_lb',
					nextButton:'.next_lb',
					
				});
				swiper_tclb.slideTo(idx, 10, false);
			})

			$('.muxq .tanhcuang_lb .out').on('click',function(){
				$('.muxq .tanhcuang_lb').hide();
			})



			
			// 图片显示
			$('.muxq .muxqdl .dd1 .swiper1 .sbox .ul1 li').on('click',function(){
				$(this).stop(true,false).addClass('act');
			})
			

			// 详情关闭弹窗
			$('body').on('click','.iall .muxq  .fh',function(){
				$('.muxq .muxqdl  video').trigger('pause');
				$('.muxq .muxqdl  audio').trigger('pause');
				$('.muxq .muxqdl  .mp3').removeClass('act');
				$('.muxq .muxqdl .dd1 .swiper1 .sbox .ul1 li').removeClass('act');
				$('.iall .muxq ').hide();
				$('.muxq .tanhcuang_lb').hide();
			})












		})

		

	</script>
</body>

</html>